.chat {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
}

.footer {
    display: flex;
    position: relative;
    z-index: 1000;
    flex-direction: column;
}

.float-bottom {
    position: absolute;
    right: 30px;
    top: -110px;
    z-index: 1000;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    background-color: #fff;
    background-image: var(--icon_gobottom);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48px;
    box-shadow: 0 4px 16px 0 rgb(36 56 109 / 4%);
}

.item {
    display: flex;
    margin-top: 30px;
    line-height: var(--font-height-multi-32, 54px);
    text-align: justify;
    font-weight: normal;
    font-size: var(--font-size-32, 32px);
    color: var(--c-gray-01, #242833);
    transform: scaleY(-1);

    &:empty {
        display: none;
    }

    &:last-child {
        display: flex;
        margin-bottom: 30px;
    }
}

.left {
    display: flex;
    flex-direction: row;
    flex-direction: column;
    align-items: center;
    margin-right: 48px;
    padding: var(--spacing-24, 24px) var(--spacing-30, 30px);
    background: var(--c-white-100, #fff);
}

.right {
    flex-direction: row-reverse;
}

.send {
    display: flex;
    align-items: flex-start;
    padding: var(--spacing-24, 24px) var(--spacing-30, 30px);
    border-radius: var(--radius-12, 12px) 0 var(--radius-12, 12px) var(--radius-12, 12px);
    background: var(--c-extended-message-bubble, #95ec69);
}

.text {
    display: flex;
    align-items: flex-end;
    padding: 24px 30px;
    border-radius: 12px 0 12px 12px;
    background: #95ec69;
}

.output {
    display: flex;
    padding: 24px 30px;
    border-radius: 0 12px 12px;
    background: #fff;
}
